<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false">
      <div class="container">
        <div class="left">
          <a-menu
            mode="inline"
            :style="{ border: '0'}"
            :selectedKeys="selectedKeys"
            @select="onSelect"
          >
            <a-menu-item key="key">
              密钥设置
            </a-menu-item>
            <a-menu-item key="warn">
              报警服务设置
            </a-menu-item>
            <a-menu-item key="openService">
              开放服务设置
            </a-menu-item>
          </a-menu>
        </div>
        <div class="right">
          <KeySetting v-if="selectedKeys[0] ==='key'"/>
          <WarnSetting v-if="selectedKeys[0] ==='warn'"/>
          <OpenService v-if="selectedKeys[0] ==='openService'"/>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script>
  import style from './index.css'
  import store from '@/store'
  import KeySetting from '@/views/system/settings/KeySetting'
  import WarnSetting from '@/views/system/settings/WarnSetting'
  import OpenService from '@/views/system/settings/OpenService'

  export default {
    components: {
      KeySetting,
      WarnSetting,
      OpenService
    },
    data() {
      return {
        selectedKeys: ['key']
      }
    },
    beforeMount() {
      store.dispatch('fetchSettings')
    },
    methods: {
      onSelect(selectedKeys) {
        this.selectedKeys = [selectedKeys.key]
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
